import React, { useEffect, useState } from 'react';
import { Drawer, Form, Input, Radio, Slider, Switch } from 'antd';
import { ipcRenderer } from 'electron';
import './index.css'
import { SketchPicker, SwatchesPicker } from 'react-color'
import { getSeting } from '@ui/services'
import { TextProps } from '@ui/types'
import SketchExample from './SketchExample';
interface SetModalPorps {
    visible: boolean;
    close(): void;
}
const SetModal: React.FC<SetModalPorps> = ({ visible, close }) => {

    const [form] = Form.useForm()
    const [color, setColor] = useState<string>('');

    useEffect(() => {
        getSeting().then((res: TextProps) => {
            console.log(res);
            form.setFieldsValue({
                ...res
            })
        })
    }, [visible]);

    const onFinish = () => { }
    const onOk = () => {
        form.validateFields().then(res => {
            console.log(res);
            ipcRenderer.send("set-text", res);
        })
    }
    const options = [
        { label: '慢', value: '6s' },
        { label: '中', value: '4s' },
        { label: '快', value: '2s' },
    ];


    return <div className='setModal'
        style={{ display: visible ? "block" : 'none' }}
    >
        <Form
            form={form}
            name="basic"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            onFinish={onFinish}
            autoComplete="off"
            onChange={onOk}
            style={{ width: "100vw" }}
        >
            <Form.Item
                label="是否闪烁"
                name="fade"
                valuePropName="checked"

            >
                <Switch onChange={onOk} />
            </Form.Item>
            <Form.Item
                label="跑马灯文字"
                name="scrollText"

            >
                <Input />
            </Form.Item>
            <Form.Item
                label="文字大小"
                name="fontSize"
            >
                <Slider
                    defaultValue={50}
                    min={16}
                    max={200}
                    onChange={onOk}
                />

            </Form.Item>
            <Form.Item
                label="速度"
                name="speed"
            >
                <Radio.Group
                    options={options}
                    optionType="button"
                    onChange={onOk}
                />
            </Form.Item>
            <Form.Item
                label="文字颜色"
                name="color"

            >
                <SketchExample onChange={onOk} />
            </Form.Item>
            <Form.Item
                label="文字阴影"
                name="shadowColor"

            >
                <SketchExample onChange={onOk} />
            </Form.Item>
            <Form.Item
                label="是否开机启动"
                name="autoStart"
                valuePropName="checked"

            >
                <Switch onChange={onOk} />
            </Form.Item>
        </Form>
    </div>
}

export default SetModal;